<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , user-scalable=no,initial-scale=1.0" />
<script src="/js/jquery-1.7.min.js"> </script>
<script src="/js/jquery.history.js"> </script>
<script type="text/javascript">
	$(document).ready(function() {
		
		// jquery.history 사용법
		// ajax 로 이동하는 페이지들을 history 에 담고 싶다면,
		//  init 메쏘드에 콜백함수를 등록하고, 해당 콜백함수를 통해서 이동한 페이지 내용을 보여준다.
		//  실제로 온클릭 이벤트 발생시 load 메쏘드를 사용하여 goMenu 에 파라미터로 넘겨준다.
		
		$.history.init(goMenu);
		$('._link').click(function(){
			$.history.load( $(this).attr('pageid') );
		});
		
	});
	
	goMenu = function(pageid) {
		switch(pageid) {
			case 'no1' : 
				$('#mainContents').load('page1.jsp');
				break;
			case 'getList2' :
				$('#mainContents').load('page2.jsp');
				break;
			case 3 :
				$('#mainContents').load('page3.jsp');
				break;
		}
	};
	
</script>
</head>
<body>

<div id="top">
	<a class="_link" pageid="no1">1번페이지로</a>
	<a class="_link" pageid="getList2">2번페이지로</a>
	<a class="_link" pageid="3">3번페이지로</a>
</div>

<div id="mainContents">
	
</div>
	

</body>
</html>